<template>
    <section class="area_manage intelligent-content-bg overflowYAll">
        <div class="intelligent-content-box">
            <el-form :inline="true" :model="form" class=" origan-info-box" >
                <el-form-item >
                    <el-button type="primary"  @click="add">+ 注册区域</el-button>
                </el-form-item>
                <el-form-item >
                    <el-input  v-model="form.name" placeholder="请输入区域名称">
                        <el-button icon="el-icon-search" slot="append" @click="search"></el-button>
                    </el-input>
                </el-form-item>
            </el-form>
        	<table-diy :total="total" :tableTitle="tableTitle" :tableData="tableData"
        		:pageNo = "pageNo"
                @detail="detailTable"
                @del = "del"
                @handleCurrentChange = "handleCurrentChange"
                @peizhi="peizhi"
                @updata="updataTable">
            </table-diy>
        	<el-dialog
                :title="titleDiy"
                :visible.sync="dialogVisible1"
                v-if="dialogVisible1"
                width="50%"
                class="diy-dialog"
                :append-to-body=true
                @close="closeDialog"
			>
                <form-origin 
                    :Tongdaolist = "Tongdaolist"
                    :quyuORtongdao = "quyuORtongdao"
                    :type="dialog1Type" 
                    :detailId="detailId"
                    :formUpdata = "formUpdata"
                    :content = "currentPage" 
                    :formData="formData" 
                    :formLabel="formLabel"
                    @UpdataData = "UpdataData"
                    @insertData = "insertData"
                    @emitSelectWangduan = "emitSelectWangduan"
                    @peizhiSubmit="peizhiSubmit"
                    @dialogVisible1Cancel="dialogVisible1Cancel"
                >
                </form-origin>
			</el-dialog>
        </div>
    </section>
</template>

<script>
	import {
		computedGetAreaSearch,
		computedGetAreaDetail2,
		computedGetAreaDetail3,
		computedGetAreaDetail,
		computedGetWangDuanByIdAndType,
		computedInsertAreaInfo,
		computedUpdataAreaInfo,
		computedDelArea,
		computedGetAreaTongdao,
		computedAreaPeizhi
	} from "./css_js_img/computedareaResource"
    import tableDiy from './components/tableDiy'
    import formOrigin from './components/formOrigin'

    export default {
    	components:{
    		tableDiy,
    		formOrigin
    	},
        data() {
          return {
          		detailId:'',
          		pageNo:1,
          		total:0,
          		dataOriginId:0,
          		quyuORtongdao:'',
          		currentPage:'dataOrigin',
          		titleDiy:'',
          		dialog1Type:'add',
          		dialogVisible1:false,
          		Tongdaolist:[],
          		form:{
          			name:'',
          			pageNum:1,
          			pageSize:10
          		},
          		tableData: [],
		        tableTitle:{
		        	name:'区域名称',
		        	nodeSn:'区域标识',
		        	segment:'所属网段',
		        	memory:'内存',
		        	cpuNum:'cpu',
		        	diskSize:'硬盘',
		        },
		        formLabel:[],
		        formUpdata:{
		          		name:"",
		          		nodeSn:'',
		          		memory:'',
		          		diskSize:"",
		          		cpuNum:"",
		          		segment:"",
		         },
		        formAdd:[
		        	{
		        		show:'normal',
		        		label:'区域名称',
		        		placehold:'请输入区域名',
		        		type:'input',
		        		diyWidth:'350px',
		        		modelData:"name",
		        		inputAfter:' ',
		        	},
		        	{
		        		show:'disabled',
		        		label:'区域标识',
		        		placehold:'由系统自动生成',
		        		type:'input',
		        		diyWidth:'350px',
		        		modelData:"nodeSn",
		        		inputAfter:' ',
		        	},
		        	{
		        		show:'normal',
		        		label:'内存总量',
		        		placehold:'',
		        		type:'input',
		        		diyWidth:'150px',
		        		modelData:"memory",
		        		inputAfter:' G',
		        	},
		        	{
		        		show:'normal',
		        		label:'磁盘大小',
		        		placehold:'',
		        		type:'input',
		        		diyWidth:'150px',
		        		modelData:"diskSize",
		        		inputAfter:' G',
		        	},
		        	{
		        		show:'normal',
		        		label:'CPU总数',
		        		placehold:'',
		        		type:'input',
		        		diyWidth:'150px',
		        		modelData:"cpuNum",
		        		inputAfter:' 核',
		        	},
		        	{
		        		show:'normal',
		        		label:'所属网段',
		        		placehold:'',
		        		type:'radioGroup',
		        		modelData:"segment",
		        		inputAfter:' ',
		        		radios:[],
		        	},
		        ],
		        formPeizhi:[
		        	{
		        		show:'normal',
		        		label:'请选择通道的负载均衡策略',
		        		placehold:'',
		        		type:'radioGroup',
		        		modelData:"strategyType",
		        		inputAfter:' ',
		        		radios:[
		        			{
		        				name:'随机方式',
		        				id:1
		        			},
		        			{
		        				name:'轮询方式',
		        				id:2
		        			},
		        			{
		        				name:'权重策略',
		        				id:3
		        			}
		        		],
		        	},
		        ],
		        formData:[
		        	{
		        		label:'区域名称',
		        		value:'',
		        	},
		        	{
		        		label:'区域标识',
		        		value:'',
		        	},
		        	{
		        		label:'内存总量',
		        		value:'',
		        	},
		        	{
		        		label:'磁盘大小',
		        		value:'',
		        	},
		        	{
		        		label:'CPU总数',
		        		value:'',
		        	},
		        	{
		        		label:'所在网段',
		        		value:'',
		        	},
		        ],
		        dataType:["","csv文件","mysql5.7","oracle11","xml文件","json文件"],
          };
        },
        methods: {
        	add(){
        		this.dataOriginId = 0;
        		this.titleDiy = '注册区域'
        		this.dialog1Type = 'add';
        		computedGetWangDuanByIdAndType(this);
        		this.formLabel = this.formAdd;
        		this.dialogVisible1 = true;
        	},
        	detailTable(scope){/*tabel的详情*/
        		console.log(scope);
        		this.detailId = scope.row.id;
        		computedGetAreaDetail2(this);
        		this.titleDiy = '详情页面'
        		this.dialog1Type = 'detail';
        		this.dialogVisible1 = true;
        	},
        	updataTable(scope){/*table的修改*/
        		console.log(scope);
        		this.dialog1Type = 'updata'
        		this.detailId = scope.row.id;
        		this.formLabel = this.formAdd;
        		this.titleDiy = '修改区域'
        		computedGetAreaDetail3(this);
        		computedGetWangDuanByIdAndType(this);
        		this.dialogVisible1 = true;
        	},
        	search(){
        		computedGetAreaSearch(this);
        	},
        	del(scope){
        		computedDelArea(this,scope);
        	},
        	insertData(val){/*插入到数据库*/
        		console.log(val);
        		computedInsertAreaInfo(this,val);
        	},
        	UpdataData(val){
        		computedUpdataAreaInfo(this,val);
        	},
        	handleCurrentChange(val){
        		console.log(val);
        		this.form.pageNum = val;
        		this.search();
        	},
        	emitSelectWangduan(val){
        	},
        	peizhi(val){/*配置详情*/
        		console.log(val);
        		this.dataOriginId = val.row.id;
        		this.titleDiy = '策略配置'
        		this.dialog1Type = 'add';
        		this.quyuORtongdao = 'quyu';
        		this.formLabel = this.formPeizhi;
        		computedGetAreaTongdao(this,this.dataOriginId);
        		this.dialogVisible1 = true;
        	},
        	peizhiSubmit(val){
        		console.log(val);
        		computedAreaPeizhi(this,val);
        	},
            dialogVisible1Cancel(){
                this.dialogVisible1 = false;
                this.quyuORtongdao = '';
               	this.search();
            },
            closeDialog(){
                this.quyuORtongdao = '';
            },
        },
        mounted(){
        	this.search();
        }
  };
</script>

<style>
	.area_manage .form1{
		margin: 10px;
	    border-bottom: dashed 1px #a7a4a4;
	    padding-bottom: 25px;
	}
    @keyframes dialog-fade-in {
    0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    }
    100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    }
    }
    @keyframes dialog-fade-out {
    0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    }
    100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    }
    }   
</style>